import React, { Component } from 'react'
import {Menu,Layout } from 'antd'
import MenuData from './Siderbardata'
import {withRouter} from 'react-router'
//import store from '../../redux/store';
import {connect} from 'react-redux'
const {Sider} = Layout;
const { SubMenu } = Menu;

class Sidebar extends Component {
    componentDidMount() {
        // store.subscribe(()=>{
        //     console.log("更新折叠",store.getState())
        //     this.setState({
        //         collapsed:store.getState().isCollapsed
        //     })
        // })
    }
    
    state = {
        //collapsed: false,
      }
     
    render() {
        // console.log(this.props.location)
        const selectedKey=[this.props.location.pathname]
        let list = this.props.location.pathname
        const OpenKeys = [list.substring(0,list.lastIndexOf('/'))]
        return (
            <Sider trigger={null} collapsible collapsed={this.props.isCollapsed}  >
                <Menu theme="dark" mode="inline" onClick={this.handleclick } selectedKeys={selectedKey} defaultOpenKeys={OpenKeys}
                >
                    {this.renderMenu(MenuData)}
                </Menu>
            </Sider>
        )
    }
    handleclick=(data)=>{
        // console.log(data)
        this.props.history.push(data.key)
    }
    toggle = () => {
        this.setState({
          collapsed: !this.state.collapsed,
        })
    }
    renderMenu=(Menulist)=>{
        return Menulist.map(item=>{
            if(item.Children){
                return <SubMenu key={item.key} title={item.title} icon={item.icon} >
                                {this.renderMenu(item.Children)}
                        </SubMenu>
            }else{
                return <Menu.Item key={item.key} icon={item.icon}>
                    {item.title}
                </Menu.Item>
            }
        })
    }
}
const mapstateToProps=(state)=>{
    return {
        isCollapsed:state.isCollapsed
    }
}


export default withRouter(connect(mapstateToProps)(Sidebar))